<template>
  <canvas id="magic"></canvas>
</template>

<script>
/* eslint-disable */
export default {
  name: 'canvas',
  props:{
    roundColor: {
      type: String,
      default: "0,159,255"
    },
    roundOpacity: {
      type: String,
      default: "1"
    },
  },
  mounted () {
//封装方法，压缩之后减少文件大小
    const getAttribute = (node, attr, default_value) => {
      return node.getAttribute(attr) || default_value;
    }
    //封装方法，压缩之后减少文件大小
    const getByTagname = (name) => {
      return document.getElementsByTagName(name);
    }
    //获取配置参数
    const getConfigOption = () => {
      var scripts = getByTagname("script"),
        scriptLen = scripts.length,
        script = scripts[scriptLen - 1]; //当前加载的script
      return {
        l: scriptLen, //长度，用于生成id用
        z: getAttribute(script, "zIndex", 1), //z-index
        o: getAttribute(script, "opacity", 1), //opacity
        c: getAttribute(script, "color", this.roundColor), //color
        n: getAttribute(script, "count", 99) //count
      };
    }
    //设置canvas的高宽
    const setCanvasSize = () => {
      canvasWidth = theCanvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      canvasHeight = theCanvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }

    //绘制过程
    const drawCanvas = () => {
      context.clearRect(0, 0, canvasWidth, canvasHeight);
      //随机的线条和当前位置联合数组
      var allArray = [currentPoint].concat(randomLines);
      var e, i, d, xDist, yDist, dist; //临时节点
      //遍历处理每一个点
      randomLines.forEach(function(r) {
        r.x += r.xa,
          r.y += r.ya, //移动
          r.xa *= r.x > canvasWidth || r.x < 0 ? -1 : 1,
          r.ya *= r.y > canvasHeight || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
          context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
        for (i = 0; i < allArray.length; i++) {
          e = allArray[i];
          //不是当前点
          if (r !== e && null !== e.x && null !== e.y) {
            xDist = r.x - e.x, //x轴距离 l
              yDist = r.y - e.y, //y轴距离 n
              dist = xDist * xDist + yDist * yDist; //总距离, m
            dist < e.max && (e === currentPoint && dist >= e.max / 2 && (r.x -= 0.03 * xDist, r.y -= 0.03 * yDist), //靠近的时候加速
              d = (e.max - dist) / e.max,
              context.beginPath(),
              context.lineWidth = d / 2,
              context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
              context.moveTo(r.x, r.y),
              context.lineTo(e.x, e.y),
              context.stroke());
          }
        }
        allArray.splice(allArray.indexOf(r), 1);

      }), frameFunc(drawCanvas);
    }
    //创建画布，并添加到body中
    var theCanvas = document.createElement("canvas"), //画布
      config = getConfigOption(), //配置
      canvasId = "c_n" + config.l, //canvas id
      context = theCanvas.getContext("2d"), canvasWidth, canvasHeight,
      frameFunc = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
        window.setTimeout(func, 1000 / 45);
      }, random = Math.random,
      currentPoint = {
        x: null, //当前鼠标x
        y: null, //当前鼠标y
        max: 20000
      };
    theCanvas.id = canvasId;
    theCanvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
    getByTagname("body")[0].appendChild(theCanvas);
    //初始化画布大小

    setCanvasSize(), window.onresize = setCanvasSize;
    //当时鼠标位置存储，离开的时候，释放当前位置信息
    window.onmousemove = function(e) {
      e = e || window.event, currentPoint.x = e.clientX, currentPoint.y = e.clientY;
    }, window.onmouseout = function() {
      currentPoint.x = null, currentPoint.y = null;
    };
    //随机生成config.n条线位置信息
    for (var randomLines = [], i = 0; config.n > i; i++) {
      var x = random() * canvasWidth, //随机位置
        y = random() * canvasHeight,
        xa = 2 * random() - 1, //随机运动方向
        ya = 2 * random() - 1;
      randomLines.push({
        x: x,
        y: y,
        xa: xa,
        ya: ya,
        max: 6000 //沾附距离
      });
    }
    //0.1秒后绘制
    setTimeout(function() {
      drawCanvas();
    }, 100);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #magic{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
  }
</style>
